<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Dashboard</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				font-size: 12px;
			}
			
			.sum-count-main {
				width: 100%;
				margin: 30px auto;
				display:flex; 
				justify-content:center;
				align-items:center;
			}
			
			.sum-count-main > div {
				width: 95%;
				margin: auto;
				display:flex; 
				justify-content:center;
				align-items:center;
			}
			
			.sum-count-item {
				width: 20%;
				margin: auto 2.5%;
				border: 1px solid #ccc;
				border-radius: 10px;
				background: #FFF;
				padding: 8px;
				float: left;
				text-align: center;
			}
			
			.sum-count-item img {
				width: 64px;
				height: 64px;
				margin: 0 8px 28px 0;
				vertical-align:middle;
			}
			
			.sum-count-item span {
				font-size: 32px;
				font-weight: 400;
				color: #6C7071;
				margin: 5px auto;
			}
			
			.sum-count-item p {
				font-size: 14px;
				font-weight: bold;
				margin: -24px 0 0 0;
				color: #000;
			}
			
			.chart-report-main {
				width: 100%;
				margin: 30px auto;
				display:flex; 
            		justify-content:center; 
            		align-items:center;
			}
			
			.chart-report-main > div {
				width: 95%;
				margin: auto;
				height: 300px;
				display:flex; 
            		justify-content:center; 
            		align-items:center;
			}
			
			.chart-report-item {
				width: 48%;
				margin: auto 2%;
				border-radius: 10px;
				height: 320px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="sum-count-main">
			<div>
				<div class="sum-count-item">
					<img src="/img/user-report.png"/>
					<span>343</span>
					<p>关注人数</p>
				</div>
				<div class="sum-count-item">
					<img src="/img/goods-report.png" />
					<span>1212</span>
					<p>商品数量</p>
				</div>
				<div class="sum-count-item">
					<img src="/img/sales-report.png" />
					<span>322.2</span>
					<p>订单总额</p>
				</div>
				<div class="sum-count-item">
					<img src="/img/prize-report.png" />
					<span>23</span>
					<p>发放奖品</p>
				</div>
			</div>
		</div>
		<div class="chart-report-main">
			<div>
				<div class="chart-report-item" id="user-report"></div>
				<div class="chart-report-item" id="goods-report"></div>
			</div>
		</div>
		<div class="chart-report-main">
			<div>
				<div class="chart-report-item" id="sales-report"></div>
				<div class="chart-report-item" id="prize-report"></div>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script>
		<script type="text/javascript" src="/js/user-report.js"></script>
		<script type="text/javascript" src="/js/goods-report.js"></script>
		<script type="text/javascript" src="/js/sales-report.js"></script>
		<script type="text/javascript" src="/js/prize-report.js"></script>
	</body>
</html>
